import React, { Component } from "react";
// 只有类组件可以定义自己的state

class App extends Component {
  // 定义state，有两种方式
  // 1. es6的类 - 构造函数的构造器来定义
  // constructor() {
  //   super();
  //   // 只有调用了super函数之后，才能使用this
  //   this.state = {
  //     count: 3,
  //     name: "zhangsan",
  //   };
  // }

  // 2. es7的类 - 属性初始化器 (声明式定义,字面量定义)
  state = {
    count: 3,
    name: "zhangsan",
    show: true,
    arr: [1, 2, 3, 4, 5],
  };

  render() {
    const { count, name, show, arr } = this.state;
    return (
      <>
        <h2>state</h2>
        <div>count: {count}</div>
        <div>name: {name}</div>

        {/* 条件渲染 */}
        {/* {this.state.show ? <div>hello</div> : null} */}
        {show && <div>hello</div>}

        {/* 循环渲染 */}
        <ul>
          {arr.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
